<template>
  <div class="box">
    儿子的文具： {{ toy }}
    <p>
      父亲的汽车： {{ name }} {{ color }} {{ year }} {{ price }}
    </p>
    <button class="btn" @click="handlePrice(300)">修改父亲汽车的价格</button>
    <button class="btn" @click="getChildToy(toy)">把玩具给父亲玩一下</button>
  </div>

</template>

<script lang='ts' setup>
import { ref } from 'vue';

//写法一
// defineProps(['name', 'color', 'year', 'price', 'handlePrice'])

//写法二
// defineProps({
//   name: String,
//   color: String,
//   year: Number,
//   price: Number,
//   handlePrice: Function
// });

//写法三
// const props = defineProps({
//   name: {type: String, required: true, default: '奔驰'},
//   color: {type: String, required: true, default: () => '红色'},
//   year: {type: Number, required: true, default: 2022},
//   price: {type: Number, required: true, default: 100000}, // 父亲汽车的价格
//   handlePrice: {type: Function, required: true} // 修改父亲汽车价格的函数
// })

//写法四
interface Props {
  name: string;
  color: string;
  year: number;
  price: number;
  handlePrice: (n: number) => void;
  getChildToy: (str: string) => void;
}

const props = withDefaults(defineProps<Props>(), {
  name: "奔驰",
  color: "红色",
  year: 2022,
  price: 100000,
  handlePrice: () => { },
  getChildToy: () => { }
})

console.log(props);

const toy = ref("奥特曼")

</script>

<style scoped lang='scss'>
.box {
  border: 1px solid #ccc;
  padding: 10px;
  background-color: orange;
  color: white;
  margin-top: 20px;
}
</style>
